<template>
    <div class="slider" id="slider">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide bg" >
                    <div class="box" v-show="!loading">
                        <div class="main-content page1" v-for="(item,index) in list">
                            <video class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" controls="controls"
                                   poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" data-setup="{}">
                                <source :src="'http://demo.mqphp.com'+ item.path" type="video/mp4">
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                                    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                            <div class="card facebook-card" >
                                <div class="card-header no-border">
                                    <div class="facebook-avatar" style="margin-top: 5px">
                                        <img class="head_img" :src="item.userHeadImg" style="border-radius: 50%" alt=""width="30px" height="30px"/>
                                    </div>
                                    <div class="facebook-name text-left">
                                        <a :href="'/#/demo/'+item.id">{{item.content}}</a>
                                    </div>
                                    <div class="facebook-date text-left">{{item.created_at}}</div>
                                    <div class="like" @click.stop="like($event,item.id,index)">
                                        <i id="like" class="icon iconfont icon-xihuan1"></i>
                                        <span style="">
                                             {{ item.likeCount }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <p v-show="loading" class="Loading" >
                        <mt-spinner type="fading-circle" color="#000"></mt-spinner>
                        加载中
                    </p>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    /* eslint-disable no-unused-vars,quotes */
    //    import Swiper from '../../static/swipe/js/swiper.js'
    import {DatetimePicker, Button, Toast,InfiniteScroll,Loadmore} from 'mint-ui'

    export default {
        name: 'slider',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App',
                likeCount: 0,
                list:[],
                page: 1,
                pagecount: 0,
                loading: false
            }
        },
        mounted () {
            this.getList(1);
            this.slide();
//        var swiper = new Swiper('.swiper-container', {
//            on: {
//                init: function(){
//                    //Swiper初始化了
//                    console.log('当前的slide序号是'+this.activeIndex);
//                },
//                slideChange: function(){
//                    console.log('当前的slide序号是'+this.activeIndex);
//                }
//            },
//          pagination: {
//            el: '.swiper-pagination'
//          }
//        });
//        $(".swipe").height($(window).height());

        },
        methods: {
            /**
             * 点赞
             * */
            like (event,id,index) {
//                var currentTarget = e.currentTarget;
//                if ( currentTarget.children[0].className == "iconfont icon-xihuan"){
//                    this.test();
//                    return;
//                }
//                currentTarget.children[0].className = "iconfont icon-xihuan";
//                currentTarget.children[0].style.color = "red";
////                this.likeCount += 1


                this.$http.get("http://vue.mqphp.com/admin/api/like?video_id="+id,{
                }).then(function(res){
                    if (!res.body.status){
                        Toast("已经点过赞了，不能再点了");
                    }else {
                        Toast("点赞成功");
//                    this.likeCount += 1;
                        this.list[index].likeCount += 1;
                    }

                    $(event.target).removeClass("icon-xihuan1");
                    $(event.target).addClass("icon-xihuan");
                    $(event.target).css('color','red');
//                $('#like').removeClass("icon-xihuan1");
//                $('#like').addClass("icon-xihuan");
//                $('#like').css('color','red');
                },function(err){
                    console.log(err);
                })
            },
            test () {
                Toast("已经点过赞了，不能再点");
            },

            /**
             * 获取数据
             * */
            getList (page) {
                console.log('page'+page+'执行了getlist....');
                this.$http.get("http://vue.mqphp.com/admin/api/getJson?page="+page,{
                }).then(function(res){
                    this.pagecount = res.data.page_count;
                    this.list = res.data.data;
                    console.log(this.list);

                },function(err){
                    console.log(err);
                })
            },

            /**
             * 滑动事件监听
             */
            slide(){
                var flag = false;
                var self = this;
                var startX=0;
                var startY=0;
                var endX=0;
                var endY=0;
                var clientHeight=document.documentElement.clientHeight;
                var clientWidth=document.documentElement.clientWidth;
                let slider = document.getElementById('slider');
                slider.addEventListener('touchstart',touchstart,false);
                slider.addEventListener('touchmove',touchmove,false);

                function touchstart(event) {
                    var touch = event.targetTouches[0];
                    startX = touch.pageX;
                    startY = touch.pageY;
//                    console.log(startX);
//                    console.log(startY);
//                    console.log('触发了start事件....');
                };
                function touchmove(event) {
                    var touch = event.targetTouches[0];
                    endX = touch.pageX;
                    endY = touch.pageY;
//                    console.log(startX);
//                    console.log(startY);
//                    console.log('触发了move事件....');
                    var disX = endX - startX;

                    if(self.page == self.pagecount && disX<0){//最后一页了
                        flag = true;
                    }else {
                        $('.box').css('left', disX + 'px'); //修改css样式 滑动效果
                    }
                    slider.addEventListener('touchend',touchend,false);
                };
                function touchend(event) {
                    var distanceX = endX-startX;
                    var distanceY = endY-startY;

//                    console.log('distanceX: '+distanceX);
//                    console.log('distanceY: '+distanceY);
//                    console.log(clientHeight);

                    if(distanceX <= -clientWidth*0.2 && self.page != self.pagecount){ //往左划
                        console.log('左滑动了。。。。');
                        self.page ++;
                        console.log('page: '+self.page);

                        self.loading = true;
                        console.log('loading....');
                        setTimeout(() => {
                            self.getList(self.page);
                            self.loading = false;
                        }, 200);
                    }
                    else if(distanceX >= clientWidth*0.2 && self.page != 1){ //往右划
                        console.log('右滑动了。。。。');
                        self.page --;
                        console.log('page: '+self.page);

                        self.loading = true;
                        console.log('loading....');
                        setTimeout(() => {
                            self.getList(self.page);
                            self.loading = false;
                        }, 200);
                    }

//                    console.log('触发了end事件.....');

                    if(flag){
                        Toast('这是最后一页了！');
                        flag = false;
                    }
                    $('.box').css('left',0);
                    slider.removeEventListener('touchend',touchend,false);
                };

            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="css" scoped>
    @import "../assets/swipe/css/swiper.css";
    @import "../../static/font/iconfont.css";
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }

    .slider{
        width: 100%;
        height: 100%;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        padding-bottom: 0;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .bg{
        width: 100%;
        height: 100%;
        background: url('../../static/images/bg.png');
        background-size: 100%;
    }
    .main-content{
        overflow: hidden;
        float: left;
        /*width:5.7rem;*/
        margin:.3rem;
        /*height: 140px;*/
        background: #fff;
        border-radius: .7rem;
        width: 5.3rem;
        height: 4.7rem;
    }

    .main-content video{
        width:100%;
        height: 3.1rem;
    }
    /*.main-content .content{*/
        /*height: 30%;*/
        /*!*margin: 1rem;*!*/
    /*}*/
    .box{
        /*定位设置滑动效果*/
       position: relative;
        /*left: .8rem;*/
        transform: translateX(1rem);
    }
    .text-left{
        width: 2.8rem;
        /*text-align: left;*/
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .facebook-card{
        position: relative;
        top:-0.2rem;
        border: none;margin: 0;box-shadow:none;text-align: left;padding: 0;
    }
    .card-header{
        padding: .1rem .2rem .1rem .2rem;
    }
    .facebook-name{
        font-size: 14px;margin-left: 1.5rem;margin-top: 3px;
    }
    .facebook-name a{
        display: inline-block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #000;
        cursor: pointer;
    }
    .facebook-date{
        font-size: 12px;margin-left: 1.5rem
    }
    .like{
        display: inline-block;float: right;margin-top: -45px;text-align: center;margin-right: 5px
    }
    .like span{
        display: block;line-height: 5px;font-size: 12px;
    }
    .like i{
        font-size: 22px;
    }

    .Loading{
        font-size: .8rem;
        color: #fff;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        z-index: 999;
        width: 6rem;
        height: 2.5rem;
        background-color: skyblue;
    }



    /*video::-webkit-media-controls-panel{*/
        /*height: .8rem;*/
    /*}*/

</style>
